<template>
    <div class="operationProductDetail">
        <div class="header">
            <van-nav-bar title="商品详情" left-arrow @click-left="handleLeft"></van-nav-bar>
        </div>
        <div class="contents">
            <div class="product_detail_top">
                <div class="product_detail_top_img">
                    <van-swipe lazy-render ref="ticketSwiper" v-if="realSrcList.length">
                        <van-swipe-item v-for="(image, index) in realSrcList" :key="image">
                            <van-image class="product_detail_top-image"
                                :src="image + '?x-oss-process=image/resize,w_300'"
                                @click="enlargeImage(realSrcList, index)" />
                        </van-swipe-item>
                    </van-swipe>
                    <van-image :src="errImg" v-if="!realSrcList.length"> </van-image>
                </div>
            </div>
            <div class="product_detail_top_details">
                <div class="product_stylename">
                    <div class="styleName">{{ detailInfo.styleName }}</div>
                    <div class="product_mechanism" v-if="hmMechanismsList?.cooperationMode">多机制</div>
                </div>
                <div class="product_id">
                    {{ detailInfo.id }}
                    <van-image :src="copy" class="imgs" @click="copyClick(detailInfo.id)" v-show="detailInfo.id" />
                </div>
                <div class="product_user">
                    <div>{{ detailInfo.deptName }}</div>
                    <div>{{ detailInfo.nickName }}</div>
                </div>
                <div class="product_user">
                    <div class="examine display">
                        <div class="examine_item"
                            :style="{ backgroundColor: conputedQualityLog(detailInfo.qualityLog) ? '#E7FDEE' : '#FDE7E7', color: conputedQualityLog(detailInfo.qualityLog) ? '#19D11B' : '#FC2540' }">
                            核价初审<van-image
                                :src="conputedQualityLog(detailInfo.qualityLog) ? icon_lvseduihao : icon_wenhaohongse" />
                        </div>
                        <!-- <div class="examine_item"
                            :style="{ backgroundColor: conputedPricingLog(detailInfo.pricingLog) ? '#E7FDEE' : '#FDE7E7', color: conputedPricingLog(detailInfo.pricingLog) ? '#19D11B' : '#FC2540' }">
                            核价复审<van-image
                                :src="conputedPricingLog(detailInfo.pricingLog) ? icon_lvseduihao : icon_wenhaohongse" />
                        </div> -->
                        <div class="examine_item"
                            :style="{ backgroundColor: detailInfo.auditStatus >= 13 ? '#E7FDEE' : '#FDE7E7', color: detailInfo.auditStatus >= 13 ? '#19D11B' : '#FC2540' }">
                            核价复审<van-image
                                :src="detailInfo.auditStatus >= 13 ? icon_lvseduihao : icon_wenhaohongse" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- 轮播机制卡片 -->
            <mechanismCard :data="detailInfo.hmMechanismsList"></mechanismCard>

            <!-- 商品信息 -->
            <div class="info">
                <div v-for="(item, index) in infoList" :key="index" class="info_item" @click="popClick(index, item)">
                    <van-image :src="item.img" class="img"></van-image>
                    <div class="title">{{ item.title }}</div>
                    <van-image :src="icon_huisejiantou" class="links"></van-image>
                </div>
            </div>
            <messagePopup v-model="popShow" :type="popType" :data="popData" :title="popTitle"></messagePopup>
            <!-- 空白 -->
            <div class="back"></div>
        </div>
        <div class="footer" v-if="type == 'investmentSelection' && shoppingStatus !== '1'">
            <div class="footer_button" @click="addcart">
                确认预选
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { listBrand } from "@/api/productList/index"
import { getSupplierAddProducts } from '@/api/productList/index'
import { getEnvValue } from "@/utils/index";
import { showImagePreview, showSuccessToast } from "vant";
import { getbrandId, hmSupplierList } from "@/api/supplierList/index";
import { addShoppingCart } from '@/api/operation/index'
import { copyTextToClipboard } from '@/utils/index'
import messagePopup from './components/messagePopup.vue'
import mechanismCard from './components/mechanismCard.vue'
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const copy = new URL("@/assets/productHome/icon_fuzhi.png", import.meta.url).href;
const icon_lvseduihao = new URL("@/assets/operation/icon_lvseduihao.png", import.meta.url).href;
const icon_pinpaizizhi = new URL("@/assets/operation/icon_pinpaizizhi.png", import.meta.url).href;
const icon_shangpinzizhi = new URL("@/assets/operation/icon_shangpinzizhi.png", import.meta.url).href;
const icon_zhibobuchongxinxi = new URL("@/assets/operation/icon_zhibobuchongxinxi.png", import.meta.url).href;
const icon_jichuxinxi = new URL("@/assets/operation/icon_jichuxinxi.png", import.meta.url).href;
const icon_huisejiantou = new URL("@/assets/operation/icon_huisejiantou.png", import.meta.url).href;
const icon_wenhaohongse = new URL("@/assets/productHome/icon_wenhaohongse1.png", import.meta.url).href;

const route = useRoute();
const router = useRouter();
/** 商品id */
const uniquekey = computed(() => {
    return route.params.id;
});
/** 上级路由 */
const type = computed(() => {
    return route.query.type;
});
/** 货架id */
const shelvesCode = computed(() => {
    return route.query.shelvesCode;
});
/** 是否已经增加狗购物车 */
const shoppingStatus = computed(() => {
    return route.query.shoppingStatus;
});
/** 是否已经增加狗购物车 */
const title:any = computed(() => {
    return route.query.title;
});
// 信息
const infoList = ref([
    { img: icon_jichuxinxi, title: '基础信息：类目｜品牌｜对接群｜规格/材质 | 历史最低售价', content: '基础信息' },
    { img: icon_zhibobuchongxinxi, title: '直播补充信息：发货时间｜发货地｜物流/快递｜使用人群｜厂家可用库存 ', content: '直播补充信息' },
    { img: icon_shangpinzizhi, title: '商品资质：商品实拍 | 备案政策/许可证证件 | 其他资质', content: '商品资质' },
    { img: icon_pinpaizizhi, title: '品牌资质：品牌名称 | 品牌商标注册证 | 商标授权使用证明', content: '品牌资质' },

])
// 信息弹窗
const popShow = ref(false)
// 信息弹窗类别
const popType = ref<number>()
// 信息弹窗数据
const popData = ref()
// 信息弹窗标题
const popTitle = ref()
// 机制1
const hmMechanismsList = ref<any>()
const detailInfo = ref<any>({});


const realSrcList = ref<string[]>([]);
const voucherImageList = ref<string[]>([]);
const customsDeclarationImageList = ref<string[]>([]);
const customsInformationImageList = ref<string[]>([]);
const customsInspectionImageList = ref<string[]>([]);
const customsTestReportImgaeList = ref<string[]>([]);
const otherImageList = ref<string[]>([]);


/** 多图片并发请求更改 */
const fetchImagesSequentially = async (real_src: any, list: any) => {
    for (const item of real_src) {
        if (item) {
            const url = getEnvValue("VITE_APP_PIC_URL") + item
            list.push(url);
        }
    }
};
/** 
 * 是否核价初审样式
 */
const conputedQualityLog = (qualityLog: any) => {
    if (qualityLog) {
        if (!qualityLog.length) {
            return false
        } else if (qualityLog.length) {
            // 审核通过
            if (qualityLog[0].firstStatus == 11) {
                return true
            } else {
                return false
            }
        }
    } else {
        return false
    }
}
/** 
 * 是否核价复审样式
 */
// const conputedPricingLog = (pricingLog: any) => {
//     if (pricingLog) {
//         if (!pricingLog.length) {
//             return false
//         } else if (pricingLog.length) {
//             // 审核通过
//             if (pricingLog[0].auditStatus == 13) {
//                 return true
//             } else {
//                 return false
//             }
//         }
//     } else {
//         return false
//     }
// }
/** 获取详情 */
const getDetail = async () => {
    const res = await getSupplierAddProducts(uniquekey.value as any);

    // 根据供应商id获取供应商详情
    const response = await hmSupplierList({ id: res.data.supplierId });
    if (response.rows[0] && response.rows[0].businessImage) {
        res.data.businessImage = getEnvValue("VITE_APP_PIC_URL") + response.rows[0].businessImage;
    }

    if (res.data.productImage) {
        const real_src = res.data.productImage.split(",");
        fetchImagesSequentially(real_src, realSrcList.value);
        res.data.productImages = realSrcList.value
    }
    if (res.data.voucherImage) {
        const img1 = res.data.voucherImage.split(",");
        fetchImagesSequentially(img1, voucherImageList.value);
        res.data.voucherImages = voucherImageList.value
    }
    if (res.data.customsDeclarationImage) {
        const img2 = res.data.customsDeclarationImage.split(",");
        fetchImagesSequentially(img2, customsDeclarationImageList.value);
        res.data.customsDeclarationImages = customsDeclarationImageList.value
    }
    if (res.data.customsInformationImage) {
        const img3 = res.data.customsInformationImage.split(",");
        fetchImagesSequentially(img3, customsInformationImageList.value);
        res.data.customsInformationImages = customsInformationImageList.value
    }
    if (res.data.customsInspectionImage) {
        const img4 = res.data.customsInspectionImage.split(",");
        fetchImagesSequentially(img4, customsInspectionImageList.value);
        res.data.customsInspectionImages = customsInspectionImageList.value
    }
    if (res.data.customsTestReportImgae) {
        const img5 = res.data.customsTestReportImgae.split(",");
        fetchImagesSequentially(img5, customsTestReportImgaeList.value);
        res.data.customsTestReportImgaes = customsTestReportImgaeList.value
    }
    if (res.data.otherImage) {
        const img6 = res.data.otherImage.split(",");
        fetchImagesSequentially(img6, otherImageList.value);
        res.data.otherImages = otherImageList.value
    }

    detailInfo.value = res.data;
    hmMechanismsList.value = res.data.hmMechanismsList[1]

}
getDetail()

/** 返回区分不同地址 */
const handleLeft = () => {
    if (type.value == 'investmentSelection') {
        router.push({
            path: '/investmentSelection',
            query: {
                // 楼层号
                shelvesCode: shelvesCode.value,
            }
        })
    } else {
        router.back();
    }
};
/** 图片放大 */
const enlargeImage = (data: any, index: number) => {
    showImagePreview({
        images: data,
        startPosition: index,
    });
};
/** 复制 */
const copyClick = (title: string) => {
    copyTextToClipboard(title)
}
/** 确认预选 */
const addcart = async () => {
    await addShoppingCart({ id: detailInfo.value.id, floor: title.value.includes('一') ? 1 : title.value.includes('二') ? 2 : title.value.includes('三') ? 3 : title.value.includes('四') ? 4 : title.value.includes('五') ? 5 : title.value.includes('六') ? 6 : title.value.includes('七') ? 7 : title.value.includes('八') ? 8 : title.value.includes('九') ? 9 : title.value.includes('十') ? 10 : title.value.includes('十一') ? 11 : title.value.includes('十二') ? 12 : title.value.includes('十三') ? 13 : 0 })
    showSuccessToast('加入购物车成功')
    router.push({
        path: '/investmentSelection',
        query: {
            // 楼层号
            shelvesCode: shelvesCode.value,
            // 新增购物车 => 标识
            shoppingStatus: 1,
            // 商品id
            productId: uniquekey.value,
        }
    })
}
/**
 * 弹窗
 * @param index 
 *  0: 基础信息
 *  1: 直播补充信息
 *  2: 商品资质
 *  3: 品牌资质
 */
const popClick = async (index: number, item: any) => {
    popShow.value = true
    popType.value = index
    popTitle.value = item.content
    if (index == 3) {
        const res = await listBrand({ supplierId: detailInfo.value.supplierId });
        if (res.rows.length > 0) {
            const brandLists = res.rows.filter(
                (item: any) => item.brandName == detailInfo.value.brandName
            );
            if (brandLists.length > 0) {
                const brandInfo = await getbrandId(brandLists[0].id);
                // 品牌商标注册证
                if (brandInfo.data.brandImage) {
                    brandInfo.data.brandImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.brandImage;
                }
                // 商标授权使用证明
                if (brandInfo.data.usageImage) {
                    brandInfo.data.usageImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.usageImage;
                }
                // 店铺销售授权
                if (brandInfo.data.sellImage) {
                    brandInfo.data.sellImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.sellImage;
                }
                // 其他补充资质
                if (brandInfo.data.otherImage) {
                    brandInfo.data.otherImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.otherImage;
                }
                // 联名款/其他授权
                if (brandInfo.data.jointlyImage) {
                    brandInfo.data.jointlyImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.jointlyImage;
                }
                popData.value = brandInfo.data;
                popData.value.brandName = detailInfo.value.brandName

            } else {
                popData.value = {};
                popData.value.brandName = detailInfo.value.brandName
            }
        } else {
            popData.value = {};
            popData.value.brandName = detailInfo.value.brandName
        }
    } else {
        popData.value = detailInfo.value
    }
}

</script>
<style lang="less" scoped>
:deep(.van-popup) {
    height: 510px;
    width: 100%;
    overflow: hidden;
}

:deep(.van-popup) {
    height: 427px;

    .dialog_top {
        width: 100%;
        height: 185px;
        background: url('@/assets/operation/icon_erciquerenbeijing.png') no-repeat;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        align-content: center;

        .van-image {
            width: 70px;
            height: 70px;
        }

        .title {
            font-weight: 500;
            font-size: 16px;
            color: #1A1B1C;
            text-align: center;
            width: 100%;
            margin-top: 20px;
        }

        .describe {
            font-weight: 400;
            font-size: 14px;
            color: #1A1B1C;
            margin-top: 20px;
            padding: 0 10px;
        }

    }

    .postscript {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;

        .title {
            font-weight: 500;
            font-size: 14px;
            color: #1A1B1C;
            margin-bottom: 10px;
        }

        .buttons {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: absolute;
            bottom: 10px;
            width: calc(100% - 20px);
            box-sizing: border-box;

            .cancel {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                border: 1px solid #0094FF;
                text-align: center;
                line-height: 44px;
                font-weight: 400;
                font-size: 16px;
                color: #0094FF;
            }

            .button {
                width: 135px;
                height: 44px;
                border-radius: 23px;
                background: #0094FF;
                text-align: center;
                line-height: 44px;
                font-weight: 400;
                font-size: 16px;
                color: #FFFFFF;
            }
        }
    }
}

:deep(.van-cell) {
    padding: 0 !important;
}

:deep(.van-field__control) {
    background: #F6FAFF !important;
    border-radius: 5px;
}

:deep(.van-field__error-message) {
    position: absolute !important;
    bottom: 0px;
}

:deep(.van-field__word-limit) {
    font-weight: 400;
    font-size: 12px !important;
    color: #8492AD !important;
}

.operationProductDetail {
    width: 100%;
    height: 100vh;
    background: #FFFFFF;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;
        width: 100%;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .contents {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        justify-content: center;
        align-content: flex-start;
    }

    .product_detail_top {
        width: 98%;
        border-radius: 3px;
        height: 50%;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
        width: 100%;
        height: auto;

        &_img {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            img {
                width: 200px;
                height: 200px;
            }

            :deep(.van-swipe) {
                width: 200px;
                height: 200px;
            }

            :deep(.van-image) {
                width: 200px;
                height: 200px;
            }
        }

        .product_detail_top_img {
            width: 340px;
            height: 340px;
        }

        .van-swipe-item {
            width: 340px !important;
            height: 340px !important;

            .van-image {
                width: 340px;
                height: 340px;
            }
        }

        .van-swipe {
            width: 340px;
            height: 340px;
        }

    }

    .product_detail_top_details {
        width: 100%;
        box-sizing: border-box;
        padding: 0 15px;
        margin-bottom: 20px;

        .product_stylename {
            font-weight: 500;
            font-size: 18px;
            color: #1A1B1C;
            display: flex;
            align-items: center;

            .styleName {
                max-width: calc(100% - 80px);
            }

            .product_mechanism {
                width: 56px;
                height: 22px;
                background: linear-gradient(146deg, #0064FF 0%, #008FFF 100%);
                border-radius: 5px;
                text-align: center;
                line-height: 22px;
                font-weight: 400;
                font-size: 12px;
                color: #FFFFFF;
                margin-left: 20px;
            }
        }

        .product_id {
            width: 100%;
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;
            display: flex;
            align-items: center;
            margin-top: 15px;

            .van-image {
                width: 14px;
                height: 14px;
                margin-left: 10px;
            }

            .inventory {
                display: flex;
                align-items: center;
                margin-left: 15px;

                .title {
                    width: 50px;
                    height: 15px;
                    background: #0094FF;
                    border-radius: 2px;
                    text-align: center;
                    line-height: 15px;
                    font-weight: 400;
                    font-size: 10px;
                    color: #FFFFFF;
                }

                .number {
                    min-width: 37px;
                    height: 15px;
                    background: #EBF4FF;
                    border-radius: 2px;
                    text-align: center;
                    line-height: 15px;
                    font-weight: 500;
                    font-size: 10px;
                    color: #0094FF;
                }
            }
        }

        .product_user {
            width: 100%;
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #8492AD;

            .van-image {
                width: 14px;
                height: 14px;
                margin-left: 10px;
            }

            .display {
                display: flex;
                align-items: center;
            }

            .examine {
                div {
                    margin-right: 10px;
                }

                .examine_item {
                    width: 85px;
                    height: 22px;
                    background: #E7FDEE;
                    border-radius: 13px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 500;
                    font-size: 12px;
                    color: #19D11B;
                    line-height: 22px;

                    .van-image {
                        width: 14px;
                        height: 14px;
                        margin: 0 0 0 5px;
                    }
                }

                .examine_items {
                    width: 68px;
                    height: 22px;
                    background: #E3E5E8;
                    border-radius: 13px;
                    text-align: center;
                    line-height: 22px;
                    font-weight: 500;
                    font-size: 12px;
                    color: #8492AD;
                }
            }

            .coreName {
                width: 75px;
                height: 22px;
                background: #EBF4FF;
                border-radius: 2px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                font-weight: 500;
                font-size: 12px;
                color: #0094FF;

                .van-image {
                    width: 14px;
                    height: 14px;
                    margin-left: 0;
                }
            }
        }

    }

    .info {
        margin-top: 20px;
        width: 345px;

        .info_item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 15px;

            .img {
                width: 16px;
                height: 16px;
            }

            .title {
                font-weight: 400;
                font-size: 14px;
                color: #8492AD;
                width: calc(100% - 30px);
                display: -webkit-box;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            .links {
                width: 7px;
                height: 12px;
            }
        }
    }

    .back {
        background: #F6FAFF;
        width: 100%;
        height: 10px;
    }

    .footer {
        width: 100%;
        height: 84px;
        background: #FFFFFF;
        box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
        box-sizing: border-box;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: center;

        .footer_button {
            width: 345px;
            height: 44px;
            background: #0094FF;
            border-radius: 23px;
            text-align: center;
            line-height: 44px;
            font-weight: 500;
            font-size: 16px;
            color: #FFFFFF;
        }
    }

    :deep(.van-nav-bar) {
        // background-color: #1466ff;
        height: 46px !important;
        width: 100%;
    }

    :deep(.van-nav-bar__title) {
        color: #000;
    }

    :deep(.van-nav-bar__text) {
        color: #000;
    }

    :deep(.van-icon) {
        color: #000;
    }
}
</style>